<template>
	<view :style="{'height':minH}">
		<view class="info" :style="{'height':(winH-80)+'px'}">
			<uni-forms ref="form" :modelValue="form" label-position="top" :rules="rules">
				<view class="name-lable">
					<view class="first-name lable-box">
						<uni-forms-item label=" " name="province">
							<ccPicker class="item" :range="list_province" k="name" v="id" v-model="form.province" @picker_change="province_change" placeholder="请选择省"></ccPicker>
						</uni-forms-item>
					</view>
					<view class="second-name lable-box">
						<uni-forms-item label=" " name="city">
							<ccPicker class="item" :range="list_city" k="name" v="id" v-model="form.city" @picker_change="city_change" placeholder="请选择市"></ccPicker>
						</uni-forms-item>
					</view>
					<view class="second-area lable-box">
						<uni-forms-item label=" " name="county">
							<ccPicker class="item" :range="list_county" k="name" v="id" v-model="form.county" @picker_change="county_change" placeholder="请选择区"></ccPicker>
						</uni-forms-item>
					</view>
				</view>
				<uni-forms-item label=" " name="address">
					<uni-easyinput startFix="temp" type="text" maxlength="50" v-model="form.address" placeholder="街道地址/详细地址" />
				</uni-forms-item>
				<uni-forms-item label=" " name="consignee">
					<uni-easyinput startFix="temp" type="text" v-model="form.consignee" placeholder="收货人" />
				</uni-forms-item>
				<uni-forms-item label=" " name="mobile">
					<uni-easyinput startFix="temp" type="number" maxlength="11" v-model="form.mobile" placeholder="联系电话" />
				</uni-forms-item>
				<uni-forms-item label=" " name="zipcode">
					<uni-easyinput startFix="temp" type="number" maxlength="6" v-model="form.zipcode" placeholder="邮编" />
				</uni-forms-item>
				<uni-forms-item label=" " name="defaultAddress">
					<view class="default-address">
						<view class="">
							<text>设为默认地址</text>
						</view>
						<switch :checked="form.is_buy == 1 ? true: false" v-model="form.is_buy" @change="switchChange"/>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		
		<view class="info-btn">
			<view class="btn-box">
				<button type="default" @click="handleAdd()" class="wss-btn">保存并继续</button>
			</view>
		</view>
	</view>
</template>

<script>
	import ccPicker from "@/components/cc-picker/cc-picker.vue"
	import {getAreaNumList} from '@/api/area.js'
	import {addAddress,updateAddress,getAddress} from '@/api/address.js'
	export default {
		components: {
			ccPicker
		},
		data() {
			return {
				list_province: [],
				list_city: [],
				list_county: [],
				winH: 0,
				rules: {
					province: {
						rules: [{
								required: true,
								errorMessage: '请选择省',
							}
						]
					},
					city: {
						rules: [{
								required: true,
								errorMessage: '请选择市',
							}
						]
					},
					county: {
						rules: [{
								required: true,
								errorMessage: '请选择区',
							}
						]
					},
					// 对name字段进行必填验证
					consignee: {
						rules: [{
								required: true,
								errorMessage: '请输入收货人名称',
							},
							{
								minLength: 2,
								maxLength: 10,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					// 对name字段进行必填验证
					mobile: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								minLength: 11,
								errorMessage: '手机号长度在 {minLength} 个字符',
							}
						]
					},
					address: {
						rules: [{
								required: true,
								errorMessage: '请输入详细地址',
							},
							{
								minLength: 1,
								maxLength: 50,
								errorMessage: '详细地址长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					zipcode: {
						rules: [{
								required: true,
								errorMessage: '请输入邮编',
							},
							{
								minLength: 6,
								errorMessage: '邮编长度在 {minLength} 个字符',
							}
						]
					},
				},
				form: {
					province: null,
					city: null,
					county: null,
					address: null,
					consignee: null,
					mobile: null,
					zipcode: null,
					is_buy: 0,
					uid: null,
				}
			}
		},
		onLoad(option) {
			if(option && option.uid) {
				this.form.uid = option.uid
				this.getDetail(this.form.uid)
			}
			this.initH();
		},
		mounted() {
			this.initArea()
		},
		computed: {
			minH: function(){
				return this.winH+"px"
			}
		},
		methods: {
			switchChange(e) {
				if(e.detail.value) {
					this.form.is_buy = 1
				} else {
					this.form.is_buy = 0
				}
			},
			getDetail(uid) {
				getAddress({uid:uid}).then(res=>{
					if(res.code == 0) {
						this.form = res.data
						this.initArea(this.form.province,2)
						this.initArea(this.form.city,3)
					}
				})
			},
			province_change(e) {
				this.form.province = e.new_v
				this.initArea(e.new_v,2)
			},
			city_change(e) {
				this.form.city = e.new_v
				this.initArea(e.new_v,3)
			},
			county_change(e) {
				this.form.county = e.new_v
			},
			initArea(pid = 0,level = 1) {
				getAreaNumList({pid:pid}).then(res=>{
					if(res.code == 0) {
						if(level == 1) {
							this.list_province = res.data
						} else if(level == 2) {
							this.list_city = res.data
						} else if(level == 3) {
							this.list_county = res.data
						}
					}
				})
			},
			initH () {
				let _self = this
				uni.getSystemInfo({
				    success: function (res) {
						_self.winH = res.windowHeight
						console.log(_self.winH)
				    }
				});
			},
			handleAdd() {
				this.$refs.form.validate().then(res=>{
					console.log('表单数据信息：', res);
					let result = null;
					if(this.form.uid) {
						result = updateAddress(this.form)
					} else {
						result = addAddress(this.form)
					}
					result.then(r=>{
						if(r.code == 0) {
							uni.showModal({
								title: '成功',
								content: '操作成功，按确定返回地址列表',
								showCancel:false,
								success: (c)=>{
									var pages = getCurrentPages(); // 当前页面
									if(pages && pages.length > 1) {
										var beforePage = pages[pages.length - 2]; // 前一个页面
										uni.navigateBack({
											 success: function() {
												 beforePage.onLoad(); // 执行前一个页面的onLoad方法
												 beforePage.onPullDownRefresh()
											 }
										})
									} else {
										uni.switchTab({
											url: '/pages/user/address/address'
										})
									}
								}
							});
						}
					})
				}).catch(err =>{
					console.log(this.form)
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	uni-picker {
		font-size: 32rpx!important;
	}
	.info {
		padding: 20rpx 40rpx 120rpx 40rpx;
		overflow-y: auto;
		background-color: #ffffff;
		.name-lable {
			display: flex;
			justify-content: space-between;
			.lable-box {
				width: 33.33%;
			}
			.first-name {
				padding-right: 10rpx;
			}
			.second-name {
				padding-right: 10rpx;
			}
			.second-area {
				padding-right: 10rpx;
			}
		}
		.default-address {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			justify-content: space-between;
			border-bottom: 3rpx solid $uni-border-color;
			padding-bottom: 10rpx;
		}
	}
	.info-btn {
		position: absolute;
		bottom: 0;
		width: 100%;
		background-color: #ffffff;
		.btn-box {
			padding: 20rpx 40rpx;
			button {
				width: 100%;
				background-color: black;
				color: #ffff;
				font-size: 30rpx;
			}
		}
	}
</style>
